@if (shouldRun) {
  <div class="example-container" [class.example-is-mobile]="mobileQuery.matches">
    <mat-toolbar color="primary" class="example-toolbar">
      <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>
      <h1 class="example-app-name">Responsive App</h1>
    </mat-toolbar>

    <mat-sidenav-container class="example-sidenav-container"
                          [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
      <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'"
                  [fixedInViewport]="mobileQuery.matches" fixedTopGap="56">
        <mat-nav-list>
          @for (nav of fillerNav; track nav) {
            <a mat-list-item routerLink=".">{{nav}}</a>
          }
        </mat-nav-list>
      </mat-sidenav>

      <mat-sidenav-content>
        @for (content of fillerContent; track content) {
    <p>{{content}}</p>
  }
      </mat-sidenav-content>
    </mat-sidenav-container>
  </div>
} @else {
  <div>Please open on Stackblitz to see result</div>
}
